import React, { useEffect, useState } from 'react'
import { NavBar, Toast } from 'antd-mobile'
import { useNavigate, useParams, useLocation } from 'react-router-dom'
import request from '../../api/request'
import './index.css'

interface DiseaseDetail {
  id: number
  pathology: string
  symptom: string
  benefitTaboo: string
  chineseMedicineTreatment: string
  westernMedicineTreatment: string
}

function DiseaseDetail() {
  const navigate = useNavigate()
  const { id } = useParams()
  const location = useLocation()
  const [diseaseDetail, setDiseaseDetail] = useState<DiseaseDetail | null>(null)
  const [loading, setLoading] = useState<boolean>(true)
  const [diseaseName, setDiseaseName] = useState<string>('')

  // 返回上一页
  const handleBack = () => {
    navigate(-1)
  }

  // 获取疾病详情
  const getDiseaseDetail = () => {
    if (!id) return
    
    setLoading(true)
    request.get('/health/share/knowledgeBase/v1/findDiseaseKnowledge', {
      params: { id: parseInt(id) }
    }).then((res) => {
      console.log('疾病详情:', res)
      if (res.status === 200 && res.data.status === '0000') {
        setDiseaseDetail(res.data.result)
      } else {
        Toast.show({
          content: res.data.message || '获取疾病详情失败',
          position: 'center',
        })
      }
    }).catch((error) => {
      console.error('获取疾病详情失败:', error)
      Toast.show({
        content: '获取疾病详情失败，请重试',
        position: 'center',
      })
    }).finally(() => {
      setLoading(false)
    })
  }

  useEffect(() => {
    // 从路由状态获取疾病名称
    if (location.state?.disease) {
      setDiseaseName(location.state.disease.name)
    }
    getDiseaseDetail()
  }, [id])

  if (loading) {
    return (
      <div className="loading-container">
        <div className="loading-text">加载中...</div>
      </div>
    )
  }

  return (
    <div className="disease-detail-container">
      {/* 头部导航栏 */}
      <div className="header-navbar">
        <NavBar onBack={handleBack} className="custom-navbar">
          {diseaseName || '疾病详情'}
        </NavBar>
      </div>

      {/* 免责声明 */}
      <div className="disclaimer-banner">
        <div className="disclaimer-text">
          本模块知识仅供参考,如有需要,请在医生指导下使用
        </div>
      </div>

      {/* 疾病名称标题 */}
      <div className="disease-title">
        <h1>{diseaseName || '疾病详情'}</h1>
      </div>

      {/* 疾病详情内容 */}
      {diseaseDetail ? (
        <div className="detail-content">
          <div className="detail-section">
            <h3 className="section-title">[病理]</h3>
            <div className="section-content">
              {diseaseDetail.pathology || '暂无数据'}
            </div>
          </div>

          <div className="detail-section">
            <h3 className="section-title">[症状]</h3>
            <div className="section-content">
              {diseaseDetail.symptom || '暂无数据'}
            </div>
          </div>

          <div className="detail-section">
            <h3 className="section-title">[宜与忌]</h3>
            <div className="section-content">
              {diseaseDetail.benefitTaboo || '暂无数据'}
            </div>
          </div>

          <div className="detail-section">
            <h3 className="section-title">[中药治疗]</h3>
            <div className="section-content">
              {diseaseDetail.chineseMedicineTreatment || '暂无数据'}
            </div>
          </div>

          <div className="detail-section">
            <h3 className="section-title">[西药治疗]</h3>
            <div className="section-content">
              {diseaseDetail.westernMedicineTreatment || '暂无数据'}
            </div>
          </div>
        </div>
      ) : (
        <div className="empty-container">
          <div className="empty-text">暂无疾病详情数据</div>
        </div>
      )}
    </div>
  )
}

export default DiseaseDetail
